<template>
    <div class="not-found-container">
        <div class="illustration">
            <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24">
                <path fill="#409EFF" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
            </svg>
        </div>
        <h1 class="title">404</h1>
        <p class="description">您访问的页面不存在</p>
        <el-button 
            type="primary" 
            @click="goBack"
            class="back-button"
            :icon="House">
            返回首页
        </el-button>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { House } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const path = ref(null)

const goBack = () => {
    router.push('/')
}

onMounted(() => {
    path.value = route.path
})
</script>

<style scoped>
.not-found-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #f5f7fa;
    padding: 2rem;
}

.illustration {
    margin-bottom: 2rem;
    animation: float 3s ease-in-out infinite;
}

.title {
    font-size: 4rem;
    color: #303133;
    margin-bottom: 1rem;
    font-weight: 700;
}

.description {
    font-size: 1.2rem;
    color: #606266;
    margin-bottom: 2rem;
}

.back-button {
    padding: 12px 24px;
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.back-button:hover {
    transform: translateY(-2px);
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}
</style>